<template>
    <div ref="mainBox" class="app-container face-page">
        <div class="title-box">
            <span>设备名称:</span>
            <el-input
                placeholder="请输入内容"
                v-model="searchParam.conditions[1].value"
                size="mini"
                clearable
                style="width:200px"
            ></el-input>
            <button @click="getCameraList()">搜索</button>
        </div>
        <div style="display: flex;">
            <div class="view-videoImage-content">
                <div v-for="(item, index) in cameraList" :key="index" class="v-b-c-item-box">
                    <!-- :style="item.status == 1 ? 'background:#67c23A;':''"  {{functionFormat(item.functions)}}-->
                    <div class="videoImage-title">
                        {{item.locationName}}|{{ (item.name || "").length > 10 ? item.name.substr(0,10) + '...' : item.name }}
                    </div>

                    <!-- <div
                        v-if="index == cameraList.length - 1"
                        class="box-last"
                        :class="{checked: index == checkedIndex}"
                        @click="insertCamera(index)"
                    >
                        <i class="el-icon-plus el-icon-plus-item" />
                    </div> -->

                    <div
                        class="box-item"
                        :class="{checked: index == checkedIndex}"
                        @click="changeCamera(index)"
                    >
                        <el-popover placement="right" title="操作" width="200" trigger="click">
                            <ul>
                                <!-- <li v-if="item.status === 2">
                                    <el-button
                                        type="text"
                                        size="small"
                                        style="margin: 2px;"
                                        @click="startCamera(item.id)"
                                    >开启检测</el-button>
                                </li>
                                <li v-if="item.status === 1">
                                    <el-button
                                        type="text"
                                        size="small"
                                        style="margin: 2px;"
                                        @click="stopCamera(item.id)"
                                    >关闭检测</el-button>
                                </li> -->
                                <!-- <li>
                                    <el-button
                                        type="text"
                                        size="small"
                                        style="margin: 2px;"
                                        @click="drawLineFun(item)"
                                    >绘制检测区域</el-button>
                                </li> -->
                                <li>
                                    <el-button
                                        type="text"
                                        size="small"
                                        style="margin: 1px;"
                                        @click="deleteCamera(index)"
                                    >删除设备</el-button>
                                </li>
                                <li>
                                    <el-button
                                        type="text"
                                        size="small"
                                        style="margin: 1px;"
                                        @click="updateCamera()"
                                    >修改信息</el-button>
                                </li>
                                <li>
                                    <el-button
                                        type="text"
                                        size="small"
                                        style="margin: 1px;"
                                        @click="showPlayback($event)"
                                    >回放监控</el-button>
                                </li>
                                <li>
                                    <el-button
                                        type="text"
                                        size="small"
                                        style="margin:1px;"
                                        @click="shareVideo()"
                                    >分享视频</el-button>
                                </li>
                            </ul>
                            <img
                                :id="'videoId' + index"
                                slot="reference"
                                :src="'/cameras/' + item.id + '.jpg'"
                                onerror="this.src=''"
                                class="centeredVideo"
                                @dblclick="screenfull(index)"
                            />
                        </el-popover>
                        <i
                            class="el-icon-full-screen"
                            style="position: relative;top: -24px;color: #ecf5ff; float: right;"
                            @click="screenfull(index)"
                        />
                        <select
                            class="el-icon-full-screen"
                            style="position: relative;top: -28px;color: #000; float: right;"
                            v-model="vedioControl[index].quality"
                            @change="changeQuality()">
                            <option value="4">流畅</option>
                            <option value="3">标清</option>
                            <option value="2">高清</option>
                            <option value="1">超清</option>
                        </select>
                        <div style="font-size: xx-large;position: relative;top: -14vh;text-align: center;" >
                            <svg-icon v-show="vedioControl[index].status"  icon-class="close" @click="liveCamera(index)"/>
                            <svg-icon v-show="!vedioControl[index].status" icon-class="open" @click="liveCamera(index)"/>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 添加或者修改数据 -->
            <el-dialog title="编辑摄像头信息" :visible.sync="cameraFormVisible" width="40%">
                <el-form
                    ref="cameraForm"
                    label-width="180px"
                    :model="cameraForm"
                    :rules="cameraFormRules"
                    
                >
                    <el-form-item label="摄像头编号:" prop="id" style="display:none;">
                        <el-input v-model="cameraForm.id" placeholder="摄像头编号" />
                    </el-form-item>

                    <el-form-item label="摄像头名称:" prop="name">
                        <el-input v-model="cameraForm.name" placeholder="摄像头名称"  />
                    </el-form-item>

                    <el-form-item label="摄像头ip:" prop="ip">
                        <el-input v-model="cameraForm.ip" placeholder="摄像头ip"  />
                    </el-form-item>

                    <el-form-item label="摄像头用户名:" prop="account">
                        <el-input v-model="cameraForm.account" placeholder="摄像头用户名"  />
                    </el-form-item>

                    <el-form-item label="摄像头密码:" prop="password">
                        <el-input v-model="cameraForm.password" placeholder="摄像头密码"  />
                    </el-form-item>

                    <el-form-item label="终端设备:">
                        <el-select
                            v-model="cameraForm.deviceId"
                            placeholder="请选择终端设备"
                            @change="deviceChangeSelect"
                        >
                            <el-option
                                v-for="item in devicesList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                            >{{ item.name }} {{ item.locationName }}</el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="摄像头功能:">
                        <el-select
                            v-model="cameraForm.functionsItem"
                            multiple
                            placeholder="请选择(翻墙检测只支持单独选择)"
                        >
                            <el-option
                                v-for="item in devicesAlgorithmList"
                                :key="item.model"
                                :label="item.name"
                                :value="item.model"
                            />
                        </el-select>
                    </el-form-item>

                    <el-form-item label="手机号:" prop="mobile">
                        <el-input v-model="cameraForm.mobile" placeholder="手机号(多个已,隔开)"/>
                    </el-form-item>

                    <el-form-item label="摄像头类型:">
                        <el-select v-model="cameraForm.type" placeholder="请选择">
                            <el-option
                                v-for="item in [{name:'海康威视',value: 1},{name:'浙江大华',value: 2}]"
                                :key="item.value"
                                :label="item.name"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-form>

                <div slot="footer" class="operation">
                    <el-button size="mini" type="primary" @click="submitForm()">保存修改</el-button>
                </div>
            </el-dialog>
            <!-- 绘制报警线 -->
            <div v-show="drawSquce" class="draw-content">
                <div class="di-d-videoImage">
                    <div class="image-content">
                        <el-image
                            :src="this.bigImgUrl"
                            class="videoImage-body"
                            style="display:block;height:600px;width:900px"
                        />
                        <canvas id="canvas" ref="canvas" height="600px" width="900px" />
                    </div>
                    <div class="tool-list">
                        <div class="clolor-box">
                            <select v-model="mommentType" style="width: inherit;" @change="lineChange">
                                <option
                                    v-for="item in [{name:'直线',value:'line'},{name:'矩形',value:'rect'},{name:'多边形',value:'polygon'}]"
                                    :key="item.value"
                                    :label="item.name"
                                    :value="item.value"
                                />
                            </select>
                        </div>

                        <el-button @click="clearLine">清空</el-button>
                        <el-button @click="lineClose">取消</el-button>
                        <el-button @click="lineSave($event)">保存</el-button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 视频回放 -->
        <div class="play-back">
            <el-dialog
                title="回放"
                :visible.sync="playbackVisible"
                width="40%"
                :before-close="playbackHandleClose"
            >
                <el-form>
                    <el-form-item label="选择时间">
                        开始时间:
                        <el-date-picker
                            v-model="playbackParam.startTime"
                            size="mini"
                            :clearable="false"
                            type="datetime"
                            placeholder="开始日期时间"
                        ></el-date-picker>结束时间:
                        <el-date-picker
                            v-model="playbackParam.endTime"
                            size="mini"
                            :clearable="false"
                            type="datetime"
                            placeholder="结束日期时间"
                        ></el-date-picker>
                    </el-form-item>
                    <el-form-item label="监控视频">
                        <template slot-scope="scope">
                            <img
                                id="playback"
                                style="width: 100%;height: 100%;"
                                src=""
                            />
                        </template>
                    </el-form-item>
                    <el-form-item label="操作" style="text-align: center;">
                        <el-button id="playbackButton" type="primary" @click="playback($event)">开始回放</el-button>
                        <el-button @click="playbackHandleClose()">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </div>
            <!-- 视频分享 -->
        <div class="play-back">
            <el-dialog
                title="分享"
                :visible.sync="shareVisible"
                width="40%"
            >
                <el-form>
                    <el-form-item label="分享链接">
                        <el-input v-model="shareUrl" placeholder="分享链接"  />
                    </el-form-item>
                </el-form>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import { mapGetters } from "vuex";
import request from '@/utils/request'

export default {
    data() {
        return {
            cameraList: [],
            devicesList: [],
            devicesAlgorithmList: [],
            searchParam: {pageNum: 1, pageSize: 100, conditions: [
                {key: "status", value: 0, method: "ge"},
                {key: "name", value: null, method: "like"}
            ]},
            cameraFormVisible: false,
            isAdd: false,
            cameraForm: {},
            vedioControl: [],
            cameraFormRules: {
                name: [
                    { required: true, message: "请输入名称", trigger: "blur" },
                    {
                        min: 1,
                        max: 10,
                        message: "长度在 1 到 10 个字符",
                        trigger: "blur",
                    },
                ],
                ip: [
                    {
                        required: true,
                        message: "请输入ip地址",
                        trigger: "change",
                    },
                ],
                account: [
                    {
                        required: true,
                        message: "请输入账号",
                        trigger: "change",
                    },
                    {
                        min: 1,
                        max: 20,
                        message: "长度在 1 到 20 个字符",
                        trigger: "change",
                    },
                ],
                password: [
                    {
                        required: true,
                        message: "请输入密码",
                        trigger: "change",
                    },
                    {
                        min: 1,
                        max: 20,
                        message: "长度在 1 到 20 个字符",
                        trigger: "change",
                    },
                ],
            },
            title: "",
            value: "",
            isCloseLoding: true,
            drawSquce: false,
            selectObject: {},
            checkedIndex: 0,
            context: {},
            colorValue: "red",
            canvas: null,
            dragging: true,
            bigImgUrl: "",
            drawItem: {},
            mommentType: "line",
            points: new Array(),
            playbackVisible: false,
            playbackParam: { startTime: new Date(), endTime: new Date() },
            shareVisible: false,
            shareUrl: '',
        };
    },
    mounted() {
        this.getCameraList()
        this.getDevicesList()

        this.$nextTick(() => {
            this.canvas = document.getElementById("canvas");
            this.context = this.canvas.getContext("2d");
            this.canvas.onmousedown = this.onmousedown;
            this.canvas.oncontextmenu = function(event){return false}
        });
    },
    beforeRouteEnter(to, form, next) {
        try {
            this.vedioControl.forEach(e => {
                if(e.status){
                    e.status = false
                }
                if(e.wsVideo){
                    e.wsVideo.close()
                    e.wsVideo = null
                }
            })
        } catch (error) {
            console.error(error)
        }

        next()
    },
    methods: {
        getCameraList(){
            request({
                url: '/rest/camera/queryList',
                method: 'post',
                data: this.searchParam
            }).then(res => {
                if(res.status){
                    this.cameraList = res.data.records
                    // this.cameraList.push({type:1});
                    this.cameraList.forEach(item => {
                        this.vedioControl.push({status: false, quality: 4})
                    })
                }else{
                    this.$message.error(res.message);
                }
            }).catch((e) => {
                console.error(e)
                this.$message.error("网络错误!");
            });
        },
        getDevicesList(){
            request({
                url: '/rest/userDevices/queryList',
                method: 'post',
                data: {pageNum: 1, pageSize: 100, conditions: [{key: "status", value: 0, method: "ge"}]}
            }).then(res => {
                if(res.status){
                    this.devicesList = res.data.records
                }else{
                    this.$message.error(res.message);
                }
            }).catch((e) => {
                console.error(e)
                this.$message.error("网络错误!");
            });
        },
        async isDeviceOnLine(deviceId){
           let result = await request({
                url: '/rest/userDevices/onLine/' + deviceId,
                method: 'get',
            })
            return result
        },
        getDevicesAlgorithmList(){
            request({
                url: '/rest/algorithm/devicesAlgorithmList',
                method: 'post',
                data: {"userDevicesId": this.cameraForm.deviceId}
            }).then(res => {
                if(res.status){
                    this.devicesAlgorithmList = res.data.records
                }else{
                    this.$message.error(res.message);
                }
            }).catch((e) => {
                console.error(e)
                this.$message.error("网络错误!");
            });
        },
        updateCamera(){
            this.isAdd = false
            this.cameraForm = this.cameraList[this.checkedIndex]
            this.cameraFormVisible = true
        },
        deviceChangeSelect() {
            this.getDevicesAlgorithmList()
        },
        insertCamera(index) {
            this.checkedIndex = index;
            this.cameraForm = {};
            this.cameraFormVisible = true
            this.isAdd = true;
        },
        changeCamera(index){
            this.checkedIndex = index;
            this.cameraForm = this.cameraList[this.checkedIndex];
        },
        submitForm() {
            this.$refs.cameraForm.validate((valid) => {
                if (valid) {
                    let submitURL = this.isAdd ? 'rest/camera/insert' : 'rest/camera/update/' + this.cameraForm.id + '/' + this.cameraForm.deviceId
                    request({
                        url: submitURL,
                        method: 'post',
                        data: this.cameraForm
                    }).then(res => {
                        if(res.status){
                            this.$message({
                                message: res.message,
                                type: "success",
                            });
                            if (this.isAdd) {
                                this.cameraForm.status = -1;
                                this.cameraForm.id = res.data
                                this.vedioControl[this.cameraForm.id] = {status: false, quality: 4};
                                this.cameraList[this.cameraList.length - 1] = this.cameraForm
                                this.cameraList.push({type:1});
                            }
                        }else{
                            this.$message.error(res.message);
                        }
                    }).catch((e) => {
                        console.error(e)
                        this.$message.error("网络错误!");
                    });
                }
            });
        },
        deleteCamera(index){
            this.checkedIndex = index;
            this.cameraForm = this.cameraList[this.checkedIndex];

            this.$confirm("此操作将永久删除, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                request({
                    url: '/rest/camera/delete/' + this.cameraForm.id + '/' + this.cameraForm.deviceId,
                    method: 'get',
                }).then(res => {
                    if(res.status){
                        this.getCameraList()
                    }else{
                        this.$message.error(res.message);
                    }
                }).catch((e) => {
                    console.error(e)
                    this.$message.error("网络错误!");
                });
            })
            .catch(() => {});
        },
        functionFormat(functions) {
            let name = "";
            if (functions) {
                functions = functions.toString().split(",");
                this.functions.forEach((item1) => {
                    functions.forEach((item2) => {
                        if (item1.value == item2) {
                            name += " " + item1.label;
                        }
                    });
                });
            }
            return name.length > 10 ? name.substr(0,10) + '...' : name;
        },
        statusFormat(value) {
            if (value === 2)
                return "关闭状态";
            else if(value === 1)
                return "启动状态";
            else
                return ''
        },
        // 下面是利用给表格添加className,添加index
        tableRowClassName({ row, rowIndex }) {
            // 把每一行的索引放进row
            row.index = rowIndex; // 拿到的索引赋值给row的index,在这个表格中能拿到row的里面都会包含index
            return "row-remarks"; // className(类名)
        },
        //开启检测相关--------------------------
        startCamera(deviceId) {

            this.isCloseLoding = false;
            const loading = this.$loading({
                lock: true,
                text: "Loading",
                spinner: "el-icon-loading",
                background: "rgba(0, 0, 0, 0.7)",
            });
            request({
                        url: '',
                        method: 'post',
                        data: this.cameraForm
            }).then(res => {
                if(res.status){
                    this.$message({
                        message: "开启设备成功",
                        type: "success",
                    });
                    this.cameraList[this.checkedIndex].status = 1;
                } else {
                    this.$message.error("开启设备失败");
                }

                this.isCloseLoding = true;
                loading.close();
            }).catch((e) => {
                console.error(e)
                this.$message.error("网络错误!");
                this.isCloseLoding = true;
                loading.close();
            });
        },
        stopCamera(deviceId) {
            this.isCloseLoding = false;
            const loading = this.$loading({
                lock: true,
                text: "Loading",
                spinner: "el-icon-loading",
                background: "rgba(0, 0, 0, 0.7)",
            });
            request({
                        url: '',
                        method: 'post',
                        data: this.cameraForm
            }).then(res => {
                if(res.status){
                    this.$message({
                        message: "关闭设备成功",
                        type: "success",
                    });
                    this.cameraList[this.checkedIndex].status = 2;
                } else {
                    this.$message.error("关闭设备失败");
                }

                this.isCloseLoding = true;
                loading.close();
            }).catch((e) => {
                console.error(e)
                this.$message.error("网络错误!");
                this.isCloseLoding = true;
                loading.close();
            });
        },
        //绘制检测区域,开始-----------------------------------
        drawLineFun(item) {
            this.isCloseLoding = false;
            const loading = this.$loading({
                lock: true,
                text: "Loading",
                spinner: "el-icon-loading",
                background: "rgba(0, 0, 0, 0.7)",
            });
            request({
                        url: '',
                        method: 'post',
                        data: this.cameraForm
            }).then(res => {
                if(res.status){
                    this.bigImgUrl = res.data
                } else {
                    this.$message.error("关闭设备失败");
                }

                this.isCloseLoding = true;
                loading.close();
            }).catch((e) => {
                console.error(e)
                this.$message.error("网络错误!");
                this.isCloseLoding = true;
                loading.close();
            });
            // 判断是否有以前的绘制记录,如果有则绘制
            if (item.drawData) {
                let drawData = JSON.parse(item.drawData)
                this.drawLine(drawData.data)
            }
        },
        clearLine() {
            this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
            this.points.splice(0,this.points.length)
            this.dragging = true
        },
        windowToCanvas(x, y) {
            // 返回元素的大小以及位置
            var bbox = this.canvas.getBoundingClientRect();
            return {
                x: x - bbox.left * (this.canvas.width / bbox.width),
                y: y - bbox.top * (this.canvas.height / bbox.height),
            };
        },
        // Canvas点击事件
        // 遍历所有的坐标点
        onmousedown(event) {

            if (event.button == 0 && this.dragging) {
                this.canvas.addEventListener("mousemove", this.onmousemove, false);
            }else {
                this.dragging = false;
                this.canvas.removeEventListener(
                    "mousemove",
                    this.onmousemove
                );
                event.preventDefault();
            }

            var loc = this.windowToCanvas(event.clientX, event.clientY);

            if (this.points.length > 0) {

                if (this.mommentType === "line"){
                    this.points[1] = loc
                }else if(this.mommentType === "polygon"){
                    this.points.push(loc);
                } else if (this.mommentType == "rect"){
                    this.points[1] = {x:loc.x,y:this.points[0].y}
                    this.points[2] = loc
                    this.points[3] = {x:this.points[0].x,y:loc.y}
                    this.drawLine(this.points)
                }
            }else
                this.points.push(loc);

            this.drawLine(this.points);
        },
        onmousemove(e) {
            if (!this.dragging) {
                return;
            }

            const loc = this.windowToCanvas(e.clientX, e.clientY);

            if (this.mommentType === "line") {
                this.points[1] = loc
                this.drawLine(this.points);
            } else if (this.mommentType == "polygon") {
                this.drawLine(this.points.concat(loc));
            } else if (this.mommentType == "rect"){
                this.points[1] = {x:loc.x,y:this.points[0].y}
                this.points[2] = loc
                this.points[3] = {x:this.points[0].x,y:loc.y}
                this.drawLine(this.points)
            }

        },
        //画一条线
        drawLine(points) {
            this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
            this.context.lineWidth = 3;
            this.context.strokeStyle = this.colorValue;

            this.context.beginPath();
            if (points.length > 0) {
                this.context.moveTo(points[0].x, points[0].y);

                for (var i = 1; i < points.length; i++) {
                    this.context.lineTo(points[i].x, points[i].y);
                }
            }

            this.context.closePath();
            this.context.stroke();
        },
        lineChange(){
            this.clearLine()
        },
        lineClose() {
            this.clearLine()
            this.drawSquce = false
        },
        lineSave($event) {
            
            let drawData = {type: this.mommentType, data: this.points}

            const data = {
                id: this.drawItem.id,
                drawData: drawData
            };

            if (this.points.length < 1) {
                this.$message({
                    message: "请绘制警戒线",
                    type: "failure",
                });
                return;
            }
            this.saveButton = $event.currentTarget
            this.saveButton.setAttribute("disabled", true);
            this.saveButton.className += " is-disabled";
            //同步到服务器
            drawAlarm(data).then((res) => {
                this.saveButton.removeAttribute("disabled");
                this.saveButton.className = this.saveButton.className.replace(" is-disabled","");

                if (res.status) {
                    this.$message({
                        message: "绘制警戒线,操作成功!",
                        type: "success",
                    });
                    this.drawSquce = false;
                    this.cameraList[this.checkedIndex].drawData = drawData
                } else {
                    this.$message.error("绘制警戒线失败");
                    this.drawSquce = false;
                }
            });
        },
        // 视频播放----------------------------------------
        liveCamera(index) {
            this.checkedIndex = index
            const element = document.getElementById("videoId" + this.checkedIndex)
            let camera = this.cameraList[index]
            this.cameraForm = camera
           
            // 关闭状态，开启监控
            if (this.vedioControl[index].status) {
                element.src =
                    "";
                this.vedioControl[index].status = false
                let wsVideo = this.vedioControl[index].wsVideo
                if(wsVideo){
                    wsVideo.close()
                    this.vedioControl[index].wsVideo = null
                }
            } else {
                this.isDeviceOnLine(camera.deviceId).then(res => {
                    if(res.status){
                        if(res.data){
                            this.vedioControl[index].status = true
                            var domain = "wss://" + location.hostname
                            var wsVideo = new WebSocket(domain + "/aiclient/video/read/" + camera.deviceId + "/" + camera.id);
                            wsVideo.onmessage = function(evt){
                                element.src = "data:image/jpeg;base64," + evt.data;
                            }
                            this.vedioControl[index].wsVideo = wsVideo
                        }else{
                            this.$message.error('设备不在线无法播放!');
                        }
                        
                    }else{
                        this.$message.error(res.message);
                    }
                }).catch(e => {
                    this.$message.error("网络错误!");
                    console.error(e)
                })
            }
        },
        /**   * 全屏事件   */
        screenfull(index) {
            const element = document.getElementById("videoId" + index);
            // 判断是否已经是全屏
            // 如果是全屏，退出
            if (this.fullscreen) {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.webkitCancelFullScreen) {
                    document.webkitCancelFullScreen();
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if (document.msExitFullscreen) {
                    document.msExitFullscreen();
                }
                // console.log('已还原！');
            } else {
                // 否则，进入全屏
                if (element.requestFullscreen) {
                    element.requestFullscreen();
                } else if (element.webkitRequestFullScreen) {
                    element.webkitRequestFullScreen();
                } else if (element.mozRequestFullScreen) {
                    element.mozRequestFullScreen();
                } else if (element.msRequestFullscreen) {
                    // IE11
                    element.msRequestFullscreen();
                }
                // console.log('已全屏！');
            }
        },
        changeQuality(){
             request({
                url: '/rest/camera/quality/'+ this.cameraForm.deviceId + '/'  + this.cameraForm.id + '/' + this.vedioControl[this.checkedIndex].quality,
                method: 'get',
            }).then(res => {})
        },
        btoa(data) {
            return btoa(data);
        },
        //回放
        //回放页面关闭
        playbackHandleClose() {
            this.playbackVisible = false;
            let button = document.getElementById("playbackButton");
            button.removeAttribute("disabled");
            button.className = button.className.replace(" is-disabled", "");
            if(this.playbackWs){
                this.playbackWs.close()
                this.playbackWs = null
            }
        },
        showPlayback($event) {
            this.playbackVisible = true;
        },
        playback($event) {
            if (this.playbackParam.startTime > this.playbackParam.endTime) {
                this.$message.error("开始时间不能大于结束时间");
                return false;
            } else if (this.playbackParam.endTime > new Date()) {
                this.$message.error("结束时间不能大于当前时间");
                return false;
            }

            const element = document.getElementById("playback")
            let camera = this.cameraList[this.checkedIndex]
            this.cameraForm = camera
           
            // 关闭状态，开启监控
            if (this.playbackWs) {
                this.playbackWs.close()
                this.playbackWs = null
            }

            this.isDeviceOnLine(camera.deviceId).then(res => {
                if(res.status){
                    if(res.data){
                        var domain = "wss://" + location.hostname + "/aiclient/playback/read/" + camera.deviceId + "/" + camera.id + "/" + this.playbackParam.startTime.getTime() + "/" + this.playbackParam.endTime.getTime()
                        this.playbackWs = new WebSocket(domain);
                        this.playbackWs.onmessage = function(evt){
                            element.src = "data:image/jpeg;base64," + evt.data;
                        }
                    }else{
                        this.$message.error('设备不在线无法播放!');
                    }
                }else{
                    this.$message.error(res.message);
                }
            }).catch(e => {
                this.$message.error("网络错误!");
                console.error(e)
            })
            $event.currentTarget.setAttribute("disabled", true);
            $event.currentTarget.className += " is-disabled";
            
        },
        shareVideo(){
            let camera = this.cameraList[this.checkedIndex] 
            this.shareUrl = "http://client.2edge.cn?deviceId=" + camera.deviceId + "&cameraId=" + camera.id
            this.shareVisible = true
        },
    },
};
</script>

<style lang="scss">
.title-box {
    display: flex;
    span {
        line-height: 24px;
    }
}
.view-videoImage-content {
    overflow: auto;
    width: inherit;

    .v-b-c-item-box {
        width: 22vw;
        height: 28vh;
        box-sizing: border-box;
        padding: 2px;
        float: left;

        .videoImage-title {
            background: rgb(144, 147, 153);
            height: 8%;
            color: white;
            // font-size: large;
            line-height: initial;
            margin-top: 1%;
        }

        .box-item {
            width: 100%;
            height: 90%;
            border: 2px solid #01a7ff;
            margin-top: 1%;

            .centeredVideo {
                width: 100%;
                height: 100%;
            }
        }

        .box-last {
            width: 100%;
            height: 90%;
            border: 2px solid #01a7ff;
            text-align: center;
            margin-top: 1%;

            .el-icon-plus-item {
                display: -webkit-box;
                -webkit-box-pack: center;
                -webkit-box-align: center;
                width: 100%;
                height: 100%;
                font-size: xx-large;
            }
        }
    }
}
.image-edit-content {
    background-color: white;
    border-radius: 5px;

    .operation {
        text-align: center;
    }
}
.checked {
    border: 2px solid red !important;
}
.draw-content {
    height: 100%;
    width: calc(100% - 35%);
    position: absolute;
    top: 14%;
    left: 15%;
    text-align: center;
    overflow: hidden;
    z-index: 999;

    .di-d-videoImage {
        width: 800px;
        height: 600px;
        position: relative;

        #canvas {
            position: absolute;
            z-index: 99;
            top: 0;
            left: 0;
        }

        .image-content {
            position: relative;

            &:hover .line-btn {
                display: inline-block;
            }

            .line-btn {
                display: none;
                background: rgba($color: #000000, $alpha: 0);
                color: red;
                position: absolute;
                top: 10px;
                right: 10px;
                z-index: 99;
                cursor: pointer;
            }
        }
        .tool-list {
            display: flex;
            align-items: center;

            .clolor-box {
                width: 90px;
                margin: 0 20px;
            }

            .line-box {
                padding: 0 10px;
                margin: 0 10px;
                display: flex;
                align-items: center;
                justify-content: center;
                height: 40px;
                cursor: pointer;

                div {
                    height: 4px;
                    width: 30px;
                    background: #000;
                    display: inline-block;
                }
            }
            .activebac {
                background: #17375e;
            }
        }
    }
    .play-back-video {
        width: 100%;
        height: 100%;
    }
}
</style>
